{% extends "layout/base.html" %}

{% block title %}
    管理员列表
{% endblock %}

{% block head %}
    {{ super() }}
{% endblock %}

{% block bread %}
    {{ self.title() }}
{% endblock %}

{% block content %}
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <form class="layui-form layui-col-space5">
                            <div class="layui-inline layui-show-xs-block">
                                <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
                            </div>
                            <div class="layui-inline layui-show-xs-block">
                                <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end">
                            </div>
                            <div class="layui-inline layui-show-xs-block">
                                <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off"
                                       class="layui-input">
                            </div>
                            <div class="layui-inline layui-show-xs-block">
                                <button class="layui-btn" lay-submit="" lay-filter="sreach"><i
                                        class="layui-icon">&#xe615;</i></button>
                            </div>
                        </form>
                    </div>
                    <div class="layui-card-header">
                        <button class="layui-btn" onclick="xadmin.open('添加用户','/admin/add',600,600)">
                            <i class="layui-icon"></i>添加
                        </button>
                    </div>
                    <div class="layui-card-body ">
                        <table class="layui-table layui-form">
                            <thead>
                            <tr>
                                <th>账号</th>
                                <th width="10%">手机号码</th>
                                <th width="15%">邮箱</th>
                                <th width="30%">角色</th>
                                <th width="10%">加入时间</th>
                                <th width="10%" align="center">状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody class="x-cate">
                                {% for user in users %}
                                    <tr>
                                        <td>{{ user.username }}</td>
                                        <td>{{ user.phone or '' }}</td>
                                        <td>{{ user.email or '' }}</td>
                                        <td>{{ user.role_names }}</td>
                                        <td>{{ user.create_time }}</td>
                                        <td>
                                            <input type="checkbox" lay-data="{{ user.id or '' }}" name="status" lay-text="开启|停用"
                                            {% if user.status == 1 %} checked {% endif %} lay-skin="switch"
                                           lay-filter="status">
                                        </td>
                                        <td>
                                            <div class="layui-btn-group">
                                                <a class="layui-btn layui-btn layui-btn-xs item_edit" lay-data="{{ user.id }}">
                                                    <i class="layui-icon">&#xe642;</i>编辑
                                                </a>
                                                <a class="layui-btn-danger layui-btn layui-btn-xs item_delete" lay-data="{{ user.id }}">
                                                    <i class="layui-icon">&#xe640;</i>删除
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="layui-card-body ">
                        <div id="page"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
<script>
    layui.config({
        base: "/static/js/"
    }).use(['form', 'table', 'laytpl', 'laydate', 'common'], function () {
        var $ = layui.$;
        var form = layui.form,
            laydate = layui.laydate,
            laypage = layui.laypage,
            common = layui.common;

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });

        //完整功能
        laypage.render({
            elem: 'page'
            , count: {{ count }}
            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
            , jump: function (obj) {
                //console.log(obj)
            }
        });

        //监听开关
        form.on('switch(status)', function () {
            var id = $(this).attr("lay-data");
            var status = 0;
            if (this.checked) {
                status = 1;
            }
            //发异步，把数据提交
            var url = "/admin/change/" + id;
            var data = {'status': status};
            common.ajaxJsonCms('post', 'false', url, JSON.stringify(data));
        });

        $(".item_edit").click(function () {
            //编辑
            var id = $(this).attr("lay-data");
            var url = "/admin/edit/" + id;
            common.cmsLayOpen('编辑', url, '650px', '590px');

        });

        $(".item_delete").click(function () {
            //删除
            var id = $(this).attr("lay-data");
            var url = "/admin/del/" + id;
            common.ajaxCmsConfirm('系统提示', '确认删除用户?', url, null);
        });

    });

</script>
{% endblock %}
